﻿/* ========================================================================= */
/* Basic */
/* ========================================================================= */

body {
    background-image: url('/images/background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#contenthost {
    height: 100%;
    width: 100%;
}

.fragment {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 140px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 39px;
            margin-top: 59px;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-top: 37px;
            padding-right: 440px;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
            }

    .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
        width: 100%;
    }

/* ========================================================================= */
/* Snapped */
/* ========================================================================= */

@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }

        .fragment header[role=banner] .win-backbutton {
            margin: 0;
            margin-right: 10px;
            margin-top: 76px;
        }

            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-left: 0;
            margin-top: 68px;
        }
}

/* ========================================================================= */
/* Portrait */
/* ========================================================================= */

@media screen and (-ms-view-state: fullscreen-portrait) {
    .fragment header[role=banner] {
        -ms-grid-columns: 100px 1fr;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 29px;
        }
}

/* ========================================================================= */
/* Colors */
/* ========================================================================= */

/* Blue */
/* ========================================================================= */

/*
    rgb(77, 202, 254)
    rgb(26, 187, 254)
    rgb( 0, 179, 254)
    rgb( 0, 161, 228)
    rgb( 0, 125, 177)
    rgb( 0, 107, 152)
*/


/* Green */
/* ========================================================================= */

/*
    rgb(  0, 107, 152)
    rgb( 26, 207,  52)
    rgb(124, 201,  29)
    rgb(111, 201,  29)
    rgb( 87, 140,  20)
    rgb( 74, 121,  17)
*/

/* Gray */
/* ========================================================================= */

/*
    rgb(139, 139, 139)
    rgb(106, 106, 106)
    rgb( 89,  89,  89)
    rgb( 80,  80,  80)
    rgb( 62,  62,  62)
    rgb( 53,  53,  53)
*/

/* White */
/* ========================================================================= */

/*
    rgb(238, 238, 238)
    rgb(233, 233, 233)
    rgb(230, 230, 230)
    rgb(207, 207, 207)
    rgb(155, 155, 155)
    rgb(133, 133, 133)
*/

/* ========================================================================= */
/* Elements */
/* ========================================================================= */

/* ImageTextList */
/* ========================================================================= */

#imageTextList.win-listview {
    position: relative;
    height: 100%;
}

    #imageTextList.win-listview .win-container:not(.win-footprint) {
        background: rgba(238, 238, 238, 0.35);
    }

    #imageTextList.win-listview .win-focusedoutline {
        outline: rgb(111, 181, 26) solid 2px;
    }

    #imageTextList.win-listview .win-horizontal.win-viewport .win-surface {
        margin: 0px 120px 110px;
        width: calc(100% - 240px);
        height: calc(100% - 110px);
    }

    #imageTextList.win-listview .win-horizontal.win-viewport .win-container:hover {
        outline: none;
        background: rgba(238, 238, 238, 0.8);
    }

/* ImageTextListTemplate */
/* ========================================================================= */

.imageTextList {
    display: -ms-grid;
    width: 370px;
    height: 160px;
    overflow: hidden;
    padding: 5px;
}

    .imageTextList .imageTextListImage {
        -ms-grid-column: 1;
        background-color: rgb(255, 255, 255);
        margin: 5px;
        width: 50px;
        height: 50px;
        padding: 5px;
        overflow: hidden;
    }

    .imageTextList .imageTextListTextArea {
        -ms-grid-column: 2;
        margin: 0px 5px;
    }

        .imageTextList .imageTextListTextArea .imageTextListTextName {
            width: 290px;
            white-space: nowrap;
            color: rgb(0, 125, 177);
        }

        .imageTextList .imageTextListTextArea .imageTextListTextLicense {
            width: 290px;
            overflow: hidden;
            color: rgb(0, 125, 177);
        }

        .imageTextList .imageTextListTextArea .imageTextListTextDescription {
            width: 290px;
            overflow: hidden;
            color: rgb(89, 89, 89);
        }

/* Search Box */
/* ========================================================================= */

.searchBox {
    display: -ms-grid;
    position: absolute;
    top: 60px;
    right: 120px;
}

    .searchBox input[type=search].searchInput {
        -ms-grid-column: 1;
        background-color: rgba(238, 238, 238, 0.8);
        border: none;
        color: rgb(155, 155, 155);
        margin: 0;
        width: 260px;
    }

        .searchBox input[type=search].searchInput:hover {
            background-color: rgba(238, 238, 238, 0.87);
            color: rgb(139, 139, 139);
        }

        .searchBox input[type=search].searchInput:focus {
            background-color: rgb(238, 238, 238);
            color: rgb(53, 53, 53);
        }

        .searchBox input[type=search].searchInput::-ms-clear {
            background-color: rgba(255, 255, 255, 0);
            color: rgb(155, 155, 155);
        }

            .searchBox input[type=search].searchInput::-ms-clear:hover {
                /*background-color: rgb(222, 222, 222);*/
                color: rgb(139, 139, 139);
            }

            .searchBox input[type=search].searchInput::-ms-clear:hover:active {
                /*background-color: rgb(0, 0, 0);*/
                color: rgb(53, 53, 53);
            }

    .searchBox button[type=submit].searchButton {
        -ms-grid-column: 2;
        background-color: rgba(238, 238, 238, 0.8);
        min-height: 40px;
        min-width: 40px;
        padding: 0px;
        line-height: 1;
        border: none;
        color: rgb(155, 155, 155);
        font-family: "Segoe UI Symbol";
        font-size: 16pt;
        font-weight: 400;
        width: 40px;
        height: 40px;
        overflow: hidden;
    }

        .searchBox button[type=submit].searchButton:hover {
            background-color: rgba(238, 238, 238, 0.87);
            color: rgb(139, 139, 139);
        }

        .searchBox button[type=submit].searchButton:active {
            background-color: rgb(238, 238, 238);
            color: rgb(53, 53, 53);
        }

/* Rating */
/* ========================================================================= */

.win-rating .win-star.win-average.win-full,
.win-rating .win-star.win-average.win-full.win-disabled {
    color: rgb(255, 255, 255);
}

.win-rating .win-star.win-empty {
    color: rgba(255, 255, 255, 0.35);
}

/* Rating Small */
/* ========================================================================= */

.win-rating.win-small .win-star.win-average.win-full,
.win-rating.win-small .win-star.win-average.win-full.win-disabled {
    color: rgb(0, 161, 228);
}

.win-rating.win-small .win-star.win-empty {
    color: rgba(0, 161, 228, 0.35);
}

/* Typography */
/* ========================================================================= */

.imageTextList h2 {
    font-size: 16pt;
}

.titlearea {
    color: rgb(0, 125, 177);
}

/* Back Button */
/* ========================================================================= */

.win-backbutton {
    background-color: transparent;
    border-color: rgb(0, 125, 177);
    color: rgb(0, 125, 177);
}
.win-backbutton:hover {
    background-color: rgba(0, 125, 177, 0.13);
    border-color: rgb(0, 125, 177);
}
.win-backbutton:hover:active {
    background-color: rgb(0, 125, 177);
    border-color: rgb(0, 125, 177);
    color: rgb(255, 255, 255);
}
.win-backbutton:-ms-keyboard-active {
    background-color: rgb(0, 125, 177);
    border-color: rgb(0, 125, 177);
    color: rgb(255, 255, 255);
}
.win-backbutton:disabled, .win-backbutton:disabled:active {
    background-clip: padding-box;
    background-color: transparent;
    border-color: rgba(0, 125, 177, 0.4);
    color: rgba(0, 125, 177, 0.4);
}

/* Progress Bar */
/* ========================================================================= */

progress:indeterminate {
    color: rgb(0, 125, 177);
}

/* Selection */
/* ========================================================================= */

::selection {
    background-color: rgb(111, 181, 26);
    color: rgb(255, 255, 255);
}

/* Button */
/* ========================================================================= */

button, input[type=button], input[type=submit],
input[type=reset], input[type=file]::-ms-browse {
    background-color: rgb(0, 107, 152);
    border-color: rgb(77, 202, 254);
    color: rgb(255, 255, 255);
}

button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgb(0, 125, 177);
    border-color: rgb(77, 202, 254);
}

button:hover:active, button[type=submit]:hover:active,
input[type=button]:hover:active, input[type=reset]:hover:active,
input[type=submit]:hover:active, input[type=file]::-ms-browse:hover:active {
    background-clip: border-box;
    background-color: rgb(77, 202, 254);
    border-color: transparent;
    color: rgb(255, 255, 255);
}

button:-ms-keyboard-active, button[type=submit]:-ms-keyboard-active,
input[type=button]:-ms-keyboard-active, input[type=reset]:-ms-keyboard-active,
input[type=submit]:-ms-keyboard-active {
    background-clip: border-box;
    background-color: rgb(0, 0, 0);
    border-color: transparent;
    color: rgb(255, 255, 255);
}

button:disabled, button[type=submit]:disabled,
input[type=button]:disabled, input[type=reset]:disabled,
input[type=submit]:disabled, input[type=file]:disabled::-ms-browse,
button:disabled:active, button[type=submit]:disabled:active,
input[type=button]:disabled:active, input[type=reset]:disabled:active,
input[type=submit]:disabled:active, input[type=file]:disabled::-ms-browse:active {
    background-color: rgba(0, 107, 152, 0.4);
    border-color: rgba(77, 202, 254, 0.08);
    color: rgba(255, 255, 255, 0.4);
}

/* Appbar */
/* ========================================================================= */

﻿/* Scenario styles */
/* Color customization */
/* Set the separator color */

.win-appbar hr.win-command { 
    background-color: rgb(255, 255, 255); 
}

/* Set the background color */
 
.win-appbar { 
    /* Set the AppBar background color */ 
    background-color: rgb(0, 125, 177); 
}

.win-appbar button:hover:active .win-commandimage, 
.win-appbar button:-ms-keyboard-active .win-commandimage, 
.win-appbar button[aria-checked=true] .win-commandimage { 
    /* Set the pressed state command icon to the same color as the AppBar background */ 
    color: rgb(0, 125, 177);
}

/* Set the foreground color */
.win-appbar .win-label { 
    color: rgb(255, 255, 255);
}

.win-appbar button.win-command:focus { 
    border-color: rgb(77, 202, 254);
}

.win-appbar button.win-command.win-hidefocus:focus { 
    border-color: transparent; 
}

.win-appbar button:disabled .win-label, 
.win-appbar button:disabled:active .win-label, 
.win-appbar button:disabled:-ms-keyboard-active .win-label, 
.win-appbar button:disabled:active:hover .win-label { 
    color: rgba(77, 202, 254, 0.4); 
}

.win-appbar .win-commandimage { 
    color: rgb(255, 255, 255); 
}

.win-appbar button:disabled .win-commandimage, 
.win-appbar button:disabled:active .win-commandimage, 
.win-appbar button:-ms-keyboard-active:disabled .win-commandimage, 
.win-appbar button:hover:active:disabled .win-commandimage { 
    color: rgba(77, 202, 254, 0.4); 
}

.win-appbar .win-commandring { 
   background-color: transparent; 
   border-color: rgb(255, 255, 255); 
}

.win-appbar button:active .win-commandring { 
    border-color: rgba(255, 255, 255, 0); 
}

.win-appbar button:hover .win-commandring { 
    background-color: rgba(77, 202, 254, 0.13); 
    border-color: rgb(77, 202, 254); 
}

.win-appbar button:-ms-keyboard-active .win-commandring, 
.win-appbar button:hover:active .win-commandring { 
    background-color: rgb(77, 202, 254); 
    border-color: rgb(77, 202, 254); 
}

.win-appbar button:disabled .win-commandring,  
.win-appbar button:disabled:active .win-commandring,  
.win-appbar button:disabled:-ms-keyboard-active .win-commandring, 
.win-appbar button:disabled:hover:active .win-commandring { 
    background-color: transparent; 
    border-color: rgba(77, 202, 254, 0.4); 
}